<template>
  <el-table :data="tableData" stripe style="width: 100%" :editable="true" border>
    <el-table-column prop="name" label="姓名" width="180" align="center">
      <template #default="scope">
        <input type="text" v-model="scope.row.name" class="ipt" style="width:100px;text-align: center;" />
      </template>
    </el-table-column>
    <el-table-column prop="school" label="学校" width="180" align="center">
      <template #default="scope">
        <input type="text" v-model="scope.row.school" class="ipt" style="width:100px;text-align: center;" />
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center" width="320">
      <template #default="scope">
        <el-button type="danger" :icon="Delete" circle @click="deleteRow(scope.row, scope.$index, $event)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-row class="mb-4">
    <el-button plain type="primary" @click="addRow()">添加一行</el-button>
  </el-row>
</template>




<script lang="ts" setup>

import { ref, reactive } from 'vue'

const tableData = ref([
  {
    school: '',
    name: ''
  }
] as any)

//失焦事件，使用事件对象拿到dom元素并进行后续样式的修改
const deleteRow = (value, index, e) => {
  tableData.value.splice(index,1);
}

const addRow = () => {
  tableData.value.splice(tableData.value.length, 0, {
    school: '',
    name: ''
  });
}


</script>
<style lang="scss">

// 设置表格中输入框为边框为0
.ipt {
  border: 0px;
}

</style>
